import Vue from 'vue'
import App from '@/App'
import router from '@/router'
import store from '@/store'
import "swiper/css/swiper.min.css";
import '@/plugins/validate'
import '@/mock/mockServer'

import * as API from '@/api'
// {
//   reqTradeInfo，
//   reqSubmitOrder
// }


// import '@/api' //目的只是为了让api内的index.js执行


// import {reqCategoryList} from '@/api'
// reqCategoryList()


// 全局注册的组件
import TypeNav from '@/components/TypeNav'
import SwiperLoop from '@/components/SwiperLoop'
import Pagination from '@/components/Pagination'

//引入element-ui 整体引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);

// 按需引入
import { Button,MessageBox,Message } from 'element-ui';

//图片懒加载 
import VueLazyload from 'vue-lazyload'
import loading from '@/assets/images/loading.webp'
// 在图片界面没有进入到可视范围前不加载, 在没有得到图片前先显示loading图片
Vue.use(VueLazyload, { // 内部自定义了一个指令lazy
  loading,  // 指定未加载得到图片之前的loading图片
})


Vue.use(Button)
// Vue.component(Button.name, Button);


//element-ui  它内部有两大类组件  
//直接写组件标签使用的组件（el-button）
// 引入和注册方式参考上卖弄

//还有一种组件不能写标签使用，而是需要挂在vue的原型上写js代码去使用的组件（MessageBox）
//引入方式和上面一样
//注册方式如下

Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
// Vue.prototype.$confirm = MessageBox.confirm;
// Vue.prototype.$prompt = MessageBox.prompt;

Vue.prototype.$message = Message;//用来做提示消息替代我们的alert




Vue.component('TypeNav',TypeNav)
// Vue.component(TypeNav.name,TypeNav)
Vue.component('SwiperLoop',SwiperLoop)
Vue.component('Pagination',Pagination)



// @是webpack里面配置好的一个别名  代表的就是src的路径

Vue.config.productionTip = false

new Vue({
  //第一步：安装总线
  //第二步： 在想要接收数据的组件当中去$on 绑定事件      （绑定在$bus身上）
  //第三步： 在想要发送数据的组件当中去$emit 触发事件    （触发$bus身上的事件）
  beforeCreate(){
    Vue.prototype.$bus = this
    Vue.prototype.$API = API
  },
  render: h => h(App),
  router,   //每个组件内部都可以通过this.$router获取到路由器对象  this.$route获取到当前的路由对象
  store  //每个组件内部都可以通过this.$store获取到store对象
}).$mount('#app')


